<template>
	<view>
		<view class="countdown">{{ formattedTime }}</view>
		<div class="circle_process">
			<div class="stop"></div>
			<div class="wrapper right">
				<div class="circle rightcircle"></div>
			</div>
			<div class="wrapper left">
				<div class="circle leftcircle" id="leftcircle"></div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			timedata: {
				type: String,
				default: ''
			},
		},

		data() {
			return {
				timeLeft: 0,
				interval: null
			};
		},
		onShow() {},
		onLoad() {},
		onHide() {
			this.timeLeft = 0
		},
		computed: {
			formattedTime() {
				if (this.timeLeft <= 0) {
					return '00:00';
				} else {
					const minutes = Math.floor(this.timeLeft / 20).toString().padStart(2, '0');
					const seconds = (this.timeLeft % 20).toString().padStart(2, '0');
					return `${minutes}:${seconds}`;

				}
			},
			timedataPUT() {
				return this.timedata
			}
		},
		mounted() {},
		methods: {
			startTimer() {
				this.interval = setInterval(() => {
					this.timeLeft++;
					if (this.timeLeft >= 20) {
						this.$emit('stopTimeM', this.timeLeft)
						clearInterval(this.interval);
					}
				}, 1000);
			}
		},
		watch: {
			timedataPUT: {
				handler(newvalue) {
					if (newvalue === 'start') {
						this.timeLeft = 0
						this.startTimer()
					} else {
						clearInterval(this.interval);
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.paused {

		.circle_process .rightcircle {
			animation-play-state: paused;
		}

		.circle_process .leftcircle {
			animation-play-state: paused;
		}
	}

	.countdown {
		display: flex;
		justify-content: center;
		margin-bottom: 5px;
	}

	.stop {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 15px;
		height: 15px;
		background-color: #fff;
	}

	.rightcircle {
		width: 70px;
		height: 70px;
		border: 5px solid transparent;
		border-radius: 50%;
		position: absolute;
		box-sizing: border-box;
		top: 0;
		right: 0;
		border-top: 5px solid red;
		border-right: 5px solid red;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		/* 旋转45度 */

	}

	/* 这里仅考虑webkit内核的情况，您可以写完整了 */
	.rightcircle {
		-webkit-animation-name: circle_right;
		/* 动画名称 */
		-webkit-animation-duration: 5s;
		/* 完成一个动画需要的时间 */
		-webkit-animation-timing-function: linear;
		/* 动画播放的方式，linear是匀速变化 */
		-webkit-animation-iteration-count: infinite;
		/* 动画播放的次数，infinite是无限次数 */
	}

	@-webkit-keyframes circle_right {
		0% {
			transform: rotate(-135deg);
		}

		100% {
			transform: rotate(45deg);
		}
	}

	.circle_process {
		position: relative;
		width: 70px;
		height: 70px;
		background-color: #d9d9d944;
		border-radius: 50%;
	}

	.circle_process .wrapper {
		width: 35px;
		height: 70px;
		position: absolute;
		top: 0;
		overflow: hidden;
	}

	.circle_process .right {
		right: 0;
	}

	.circle_process .left {
		left: 0px;
	}

	.circle_process .circle {
		width: 69px;
		height: 70px;
		border: 5px solid transparent;
		border-radius: 50%;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		transform: rotate(-135deg);
	}

	.circle_process .rightcircle {
		border-top: 5px solid red;
		border-right: 5px solid red;
		right: 0;
		-webkit-animation: circle_right 20s linear infinite;
	}

	.circle_process .leftcircle {
		border-bottom: 5px solid red;
		border-left: 4.5px solid red;
		left: 0;
		-webkit-animation: circle_left 20s linear infinite;
	}

	@-webkit-keyframes circle_right {
		0% {
			-webkit-transform: rotate(-135deg);
		}

		50%,
		100% {
			-webkit-transform: rotate(45deg);
		}
	}

	@-webkit-keyframes circle_left {

		0%,
		50% {
			-webkit-transform: rotate(-135deg);
		}

		100% {
			-webkit-transform: rotate(45deg);
		}
	}
</style>